import React, { Component } from 'react'
import './Radio.scss'
import PropTypes from 'prop-types'
console.log(PropTypes)
export default class Radio extends Component {
    constructor(props) {
        super(props)
        // console.log(this.props)
        // this.props.fn(this)
        this.state={
            activeIndex:1
        }
    }
    static propTypes = {
        arr:PropTypes.array,   // 父传子的arr属性，需要是一个array的类型
        fn:PropTypes.func,      // 约束父传子的fn类型，应该是一个function
        age:PropTypes.number.isRequired
    }
  
    static defaultProps = {
        arr:[{value:'真高',id:11},{value:'实用',id:12},{value:'便宜',id:13}],
        fn:function() {

        },
        age:0
    }
    //   切换方法
    toogleChange(index) {
        this.setState({
            activeIndex:index
        })
    }
    //  提交的方法
    submit = ()=>{
        // console.log(this.props.arr[this.state.activeIndex].id)
        this.props.fn(this.props.arr[this.state.activeIndex].id)
    }
    render() {
        // this.props.age = 19
        console.log(this.props)
        let arr = this.props.arr.map((item,index)=>{
            return (
                <p key={index} id={index} style={{ background: this.state.activeIndex === index?"red":"" }} onClick={()=>{
                    this.toogleChange(index)
                }}>
                    {item.value}
                </p>   
            )
        })
        return (
            <>
                <div className='list'>
                    {arr}
                </div>
                <button onClick={this.submit}>评价</button>
            </>
        
        )
    }
}

